<template>
	<view class="content">
		<view class="top-block1" v-if="state==2">
			<view class="text" v-if="info.remark">审核已通过：{{info.remark}}</view>
			<view class="iconfont icon-tishi" v-else><text class="text">您提交的报名审核已通过。</text></view>
		</view>
		<view class="top-block2" v-else-if="state==1">
			<view class="iconfont icon-tishi">
				<text class="text">您的报名提交成功，管理员会在1-3个工作日内审核，请耐心等待。</text>
			</view>
		</view>
		<view class="top-block3" v-else-if="state==3">
			<view class="iconfont icon-tishi"></view>
			<view class="text" v-if="info.remark">审核未通过：{{info.remark}}</view>
			<text class="text" v-else>审核未通过</text>
		</view>
		<view class="top-block">
			<view class="time">活动时间：{{info.startTime}}至{{info.endTime}}</view>
			<view class="count">当前报名：{{info.enrollment}}人</view>
			<view class="count" v-if="info.integral" style="margin-top: 20rpx;">活动积分：{{info.integral}}分</view>
			<view class="count" v-else style="margin-top: 20rpx;">活动积分：暂无</view>
		</view>
		<view class="info-block">
			<view class="title">{{info.title}}</view>
			<view class="time">{{info.createTime}}</view>
			<mp-html :content="info.content"></mp-html>
			<view class="btn-item" @click="navigate('/page_other/personal/application?id='+info.id+'&name='+'报名')"
				v-if="type==1&&info.isApplication!=1">
				<view class="btn">立即报名</view>
			</view>
			<view class="btn-item1" v-else-if="info.isApplication==1&&type==1">
				<view class="btn">已报名</view>
			</view>
			<view class="btn-item1" v-else-if="type==2||type==3">
				<view class="btn">报名已结束</view>
			</view>
			<!-- <view class="btn-item" v-else-if="state==3" @click="navigate('/page_other/personal/index?id='+info.id)">
				<view class="btn">重新提交资料</view>
			</view> -->
			<view class="btn-item" v-else-if="info.isApplication==1&&state==2&&info.isFiles==0&&picState==0"
				@click="navigate('/page_other/activity/pictures?id='+info.id+'&state='+info.isFiles)">
				<view class="btn">上传现场图片</view>
			</view>
			<view class="btn-item" v-else-if="info.isApplication==1&&state==2&&info.isFiles==1&&picState!=2"
				@click="navigate('/page_other/activity/pictures?id='+info.id+'&state='+info.isFiles+'&picState='+picState)">
				<view class="btn">查看现场图片</view>
			</view>
			<view class="btn-item" v-else-if="info.isApplication==1&&state==2&&info.isFiles==1&&picState==2"
				@click="navigate('/page_other/activity/pictures?id='+info.id+'&state='+info.isFiles+'&picState='+picState)">
				<view class="btn">修改现场图片</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		getActivityByIdApi
	} from '@/api/activity.js'
	export default {
		data() {
			return {
				id: null,
				state: 0,
				type: 0,
				info: {
					id: 1,
					startTime: '',
					endTime: '',
					enrollment: 0,
					title: '',
					content: '',
					createTime: '',
					isApplication: null,
					isFiles: 0
				},
				picState: 0
			}
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			getDetail() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getActivityByIdApi({
					id: this.id
				}).then(res => {
					uni.hideLoading()
					this.info = res
				}).catch(() => {
					uni.hideLoading()
				})
			},
		},
		onLoad(e) {
			this.id = e.id;
			this.state = e.state;
			this.type = e.type;
			this.picState = e.picState;
			this.getDetail()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		padding: 30rpx;

		.top-block1 {
			background: #D5EBE8;
			padding: 30rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			display: flex;
			align-items: center;

			.iconfont {
				color: #0D9C6E;
				font-size: 40rpx;
				display: flex;
				align-items: center;

				.text {
					font-size: 30rpx;
					margin-left: 10rpx;
				}
			}
		}

		.top-block2 {
			background: #CADFFA;
			padding: 30rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			.iconfont {
				color: #1A7EF3;
				font-size: 40rpx;
				margin-top: 4rpx;
			}

			.text {
				font-size: 30rpx;
				margin-left: 10rpx;
				line-height: 50rpx;
			}
		}

		.top-block3 {
			background: #F3D3D6;
			padding: 30rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			.iconfont {
				color: #DF2411;
				font-size: 40rpx;
				line-height: 40rpx;

			}

			.text {
				font-size: 30rpx;
				margin-left: 10rpx;
				line-height: 40rpx;
				color: #DF2411;
			}
		}

		.top-block {
			background: #CADFFA;
			padding: 30rpx;
			border-radius: 20rpx;

			.time {
				margin-bottom: 20rpx;
			}
		}

		.info-block {
			width: 100%;
			margin-top: 30rpx;
			background: #fff;
			padding: 30rpx;
			min-height: 70vh;
			border-radius: 20rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 30rpx;
			}

			.time {
				margin-bottom: 30rpx;
				color: #747474;
				font-size: 30rpx;
			}

			.btn-item {
				width: calc(100% - 60rpx);
				position: fixed;
				bottom: 6%;
				display: flex;
				justify-content: center;
				padding-right: 60rpx;

				.btn {
					background: #157DFA;
					color: #fff;
					width: 340rpx;
					height: 80rpx;
					border-radius: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.btn-item1 {
				width: calc(100% - 60rpx);
				position: fixed;
				bottom: 6%;
				display: flex;
				justify-content: center;
				padding-right: 60rpx;

				.btn {
					background: #AAAAAA;
					color: #fff;
					width: 340rpx;
					height: 80rpx;
					border-radius: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>